<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList 任务管理器</title>
<script src="static\js\jquery-3.7.1.min.js"></script>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    h1 {
        text-align: center;
        color: #4CAF50; /* 设置标题颜色 */
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    td:first-child {
        width: 70%;  /* 设置任务格宽度占比为70% */
    }
    td:last-child {
        width: 30%;  /* 设置操作格宽度占比为30% */
    }
    .deleteBtn {
        background-color: #f44336; /* 设置删除按钮背景颜色 */
        color: white;
        border: none;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 3px;
    }
</style>
</head>
<body>

<h1>ToDoList 任务管理器</h1>

<input type="text" id="taskInput" placeholder="输入任务...">
<button id="addTaskBtn">添加任务</button>

<table id="taskList">
    <tr><th>任务</th><th>操作</th></tr>
    <!-- 任务将会在这里动态添加 -->
</table>

<script>
$(document).ready(function(){
    $("#addTaskBtn").click(function(){
        var task = $("#taskInput").val();
        if(task !== ""){
            $("#taskList").append("<tr><td>" + task + "</td><td><button class='deleteBtn'>删除</button></td></tr>");
            $("#taskInput").val(""); // 添加任务后清空输入框
        }
    });

    // 添加删除按钮的点击事件
    $("#taskList").on("click", ".deleteBtn", function(){
        $(this).closest("tr").remove(); // 删除当前行
    });
});
</script>

</body>
</html>
